<template>
    <div class="second_level_page">
        <!-- 门票（兑换券）详情 -->
        <div class="coupons_detail_box">
            <div class="cd_top">
                <div class="dw">￥{{voucherData.deductAmount}}</div>
            </div>
            <div class="middle">
                <h2 class="ellipsis">{{voucherData.voucherName}}</h2>
            </div>     
            <!-- 提货券详情 -->
            <div class="contain" v-if="voucherData.voucherType==1">
                <h2>提货券简介</h2>
                <p>礼券代码：{{voucherData.voucherCode}}</p>
                <p>抵扣金额：￥{{voucherData.deductAmount}}</p>
                <p v-if="voucherData.voucherType==1">礼券类型：{{type(voucherData)}}</p>
                </p>
                <p>有效时间：{{voucherData.expiryDate}}天</p>
                <div class="footer_01 clear">
                    <div class="right" v-if="flag" @click="bindVoucher">激活绑定</div>
                </div>
            </div>

            <!-- 门票详情 -->
            <div v-else>
                <div class="contain" v-if="this.receiveSellerId==0">
                    <h2>门票简介</h2>
                    <p>兑换代码：{{voucherData.voucherCode}}</p>
                    <p>门票价格：￥{{voucherData.deductAmount}}</p>
                    <div @click="getReceiveVoucherSellers()" class="footer_01 clear">
                        <div class="right">领取兑换</div>
                    </div>
                </div>
                <div class="contain" v-else>
                    <h2>门票简介</h2>
                    <p>兑换代码：{{voucherData.voucherCode}}</p>
                    <p>门票价格：￥{{voucherData.deductAmount}}</p>
                    <div class="footer_01 clear">
                        <div class="right" v-if="this.exchangeFlag==0" @click="showValidate()">查看凭证</div>
                        <!-- <div class="right" v-else @click="getReceiveVoucherSellers()">已领取</div> -->
                    </div>
                </div>
                <div v-if="voucherData.imgUrl">
                    <div class="details_img" v-for="img in (voucherData.imgUrl).split(',')">
                        <img :src="imgBaseUrl+img">
                    </div>
                </div>
            </div>
        </div>  
        <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>  
        <confirm-model v-if="showConfirm" @cancel="showConfirm = false;" @confirm="confirmDos()" :confirmText="confirmText"></confirm-model>
    </div>
</template>

<script>
import alertTip from 'src/components/common/alertTip'
import confirmModel from 'src/components/common/confirmModel'
import {mapState} from 'vuex'
import {bindVoucher,voucherDetail} from 'src/service/getData'
import {imgBaseUrl} from 'src/config/env'

export default {
    data(){
        return{
            myMessagestitle: '',
            token:'',
            memberId:'',
            voucherCode:'',
            voucherData:{},
            exchangeCode:'',
            flag:false,
            imgBaseUrl,
            index:0,
            receiveSellerId:0,
            exchangeFlag:0,
            exchangeVoucherId:0,
            showAlert: false, //显示提示组件
            alertText: null, //提示的内容
            confirmText: '',
            showConfirm: false,
        }
    },
    mounted(){
        this.initData();
        this.voucherDetail();
    },
    computed:{
        ...mapState([
            'userInfo',
        ]),
    },
    components:{
        alertTip, 
        confirmModel,       
    },
    methods:{
        initData(){
            this.token = this.userInfo.token;
            this.memberId = this.userInfo.id;
            this.voucherCode = this.$route.query.voucherCode;
            this.index = this.$route.query.index;
            this.receiveSellerId = this.$route.query.receiveSellerId;
            this.exchangeFlag = this.$route.query.exchangeFlag;
            this.exchangeVoucherId = this.$route.query.exchangeVoucherId;
        },
        async voucherDetail(){
            let data = await voucherDetail(this.token,this.voucherCode);
            this.voucherData = data.data;
            // console.log(this.voucherData);
            //找到当前用户对应的兑换券（门票）信息 
            for (var i = 0; i <= this.voucherData.codeList.length - 1; i++) {
                //是否是当前用户
                if (this.voucherData.codeList[i].memberId==this.memberId) {
                    //给exchangeCode赋值
                    this.exchangeCode=this.voucherData.codeList[i].exchangeCode;
                    if(this.voucherData.codeList[i].exchangeFlag==0){
                       
                        //如果没有激活（领取），flag=true，将激活、领取按钮显示出来
                        this.flag=true;
                    }
                    //根据当前页面是提货券还是门票，给myMessagestitle赋值。
                    if(this.voucherData.voucherType==1){
                        if(this.voucherData.codeList[i].exchangeFlag==1){
                            this.myMessagestitle='提货券详情'
                        }else{
                            this.myMessagestitle='激活绑定'
                        }
                    } else {
                        if(this.voucherData.codeList[i].exchangeFlag==1){
                            this.myMessagestitle='门票详情'
                        }else{
                            this.myMessagestitle='领取兑换'
                        }  
                    }
                }    
            }
        },
        showValidate(){
            // console.log(this.exchangeVoucherId);
                this.$router.push({path:'/showValidate', query:{voucherCode:this.voucherCode}});
        },
        bindVoucher(){
            this.showConfirm = true;
            this.confirmText = '确定现在要激活绑定吗？';
        },
        async confirmDos(){
            this.showConfirm = false;
            let data = await bindVoucher(this.token,this.memberId,this.voucherCode,this.exchangeCode);
            if(data.resultCode==200){
                this.showAlert = true;
                this.alertText = data.resultMessage;
                if(this.index==1) {
                    this.$router.go(-1);
                } else if(this.index==2) {
                    this.$router.push('/conversionRecord');
                } else {
                     this.$router.push('/myMessages/receiveVoucher');
                }                   
            }else{
                this.showAlert = true;
                this.alertText = data.resultMessage;
            }
        },
        async getReceiveVoucherSellers(){
            this.$router.push({path:'/voucherSellers',query:{voucherCode:this.voucherData.voucherCode}});
        },
        type(voucherData) {
                if(voucherData.voucherClass) {
                   let types = voucherData.voucherClass.split(',');
                   if(types.length!=3) {
                        return '不能解析的类型' 
                   } else {
                        if(types[0]==1) {                           
                            if(voucherData.brandId==0&&voucherData.classId==0) {
                                return '全场通用';
                            } else if(voucherData.brandId!=0&&voucherData.classId==0) {
                                return '全场通用-'+voucherData.brandName;
                            } else if (voucherData.brandId!=0&&voucherData.classId!=0) {
                                return '全场通用-'+voucherData.brandName+voucherData.className;
                            } else if(voucherData.brandId==0&&voucherData.classId!=0) {
                                return '全场通用-'+voucherData.className;
                            }
                        } else if(types[0]==2) {
                            if(voucherData.brandId==0&&voucherData.classId==0) {
                                return '指定仓库('+voucherData.warehouseCode+')';
                            } else if(voucherData.brandId!=0&&voucherData.classId==0) {
                                return '指定仓库('+voucherData.warehouseCode+')'+voucherData.brandName;
                            } else if (voucherData.brandId!=0&&voucherData.classId!=0) {
                                return '指定仓库('+voucherData.warehouseCode+')'+voucherData.brandName+voucherData.className;
                            } else if (voucherData.brandId==0&&voucherData.classId!=0) {
                                return '指定仓库('+voucherData.warehouseCode+')'+voucherData.className;
                            }
                        }
                    }
                }
            },
    },
    watch:{
        userInfo:function(value){
            this.initData()
        }
    }
}

</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    span , em , i{font-style:normal;}
    .coupons_detail_box{background:#fff;}
    .coupons_detail_box .cd_top{position:relative; width: 100%; height: 2.6rem; background: url(../../images/binding_bg.png) no-repeat; background-size: cover;}
    .coupons_detail_box .cd_top .dw{width:100%;height:2.6rem;font-size:.6rem; line-height:2.6rem;text-align: center;color:#fff;}
    .coupons_detail_box .middle{padding:.3rem;border-bottom:.01rem solid #eee;}
    .coupons_detail_box .middle h2{font-size:.3rem;color:#333;}
    .coupons_detail_box .contain{padding:.3rem;}
    .coupons_detail_box .contain h2{font-size:.28rem;color:#333;margin-bottom:.2rem;}
    .coupons_detail_box .contain p{margin-bottom:.18rem;color:#666;font-size:.26rem;}
    .details_img img{width: 100%; float: left;}
    .oo{width:100%;margin:0 auto;margin-top:.22rem;}
    .oo .left{width:5rem;}
    .oo .right{
        text-align:right;font-size:.2rem;
        color:#999;
        width:calc(100% - 5.2rem);
        -webkit-width:calc(100% - 5.2rem);
        -moz-width:calc(100% - 5.2rem);
        -o-width:calc(100% - 5.2rem);
    }
    .oo .line{display:block;overflow:hidden; margin-top:.13rem; position:relative;background:#f4f4f4;border-radius:10rem;width:100%;height:.08rem;}
    .oo .line em{display:block;position:absolute;left:0%;top:0; background:#ffa101;border-radius:10rem;width:100%;height:.08rem;}
    .footer_01{line-height:.94rem;width:100%;position:fixed;bottom:0;left:0;background:#fff;}
    .footer_01 .left{font-size:.32rem;color:#ffa101;margin-left:.3rem;}
    .footer_01 .left img{margin-right:.16rem;width:.26rem;height:.26rem; }
    .footer_01 .right{width:2.48rem;text-align: center;background:#ffa101;font-size:.32rem;color:#fff;}
</style>
